<template>
	<view @click="goJobDetail" class="jobCard">
		<view class="flex-row flex-between row">
			<view class="jobName">
				{{ jobInfo.title }}
			</view>
			<view class="salary">
				{{ jobInfo.minSalary+'-'+ jobInfo.maxSalary +'k' }}
			</view>
		</view>
		<view class="tag">
			<view v-for="(item,index) in jobInfo.welfares" class="tagItem">
				<view style="margin-right: 5px;">
					<u-tag :text="item.welfareName" plain size="mini"></u-tag>
				</view>
			</view> 
		</view>
		<view class="companyName">
			{{ jobInfo.workAddress }}
		</view>
		
	</view>
</template>

<script>
	export default{
		name:'jobCard',
		data(){
			return{
				
			};
		},
		props:{
			jobInfo:{
				type:Object,
				value:null
			}
		},
		methods:{
			goJobDetail(){
				this.$emit('goJobDetail',{jobId:this.jobInfo.id})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jobCard{
		padding: 30upx;
		margin-bottom: 20upx;
		background: #FFFFFF;
		.flex-row{
			display: flex;
		}
		.flex-between{
			justify-content: space-between;
		}
		.jobName{
			font-size: 32upx;
			letter-spacing:2px;
			color: #000000;
			font-weight: bold;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			max-width: 433upx;
		}
		.salary{
			text-align: right;
			white-space: nowrap;
			font-size: 32upx;
			font-family: Avenir;
			font-weight: 900;
			color: #0050FF;
		}
				
		.row{
				margin-bottom: 15upx;
			}
		.tag{
			font-size: 22upx;
			font-weight: 400;
			line-height: 20px;
			letter-spacing:1px;
			color: #999;
			.tagItem{
				display: inline-block;
			}
		}
		.companyName{
			    margin-top: 16upx;
			    color: #999;
			    font-size: 22upx;
		}
		
	}
</style>
